<template>
  <div>
  
    <MyHeader bgc="green"
              title="购物车"
    ></MyHeader>

    <div class="main">

      <MyGoods v-for="item in list" :key="item.goods_id"
               :obj="item"
      ></MyGoods>

    </div>

    <MyFooter :arr="list"
    ></MyFooter>
  
  </div>
</template>

<script>
import MyHeader from './MyHeader.vue'
import MyFooter from './MyFooter.vue'
import MyGoods from './MyGoods.vue'

import 'bootstrap/dist/css/bootstrap.css'
import axios from 'axios'

export default {
  components: {
    MyHeader,
    MyGoods,
    MyFooter
  },
  data () {
    return {
      list: []
    }
  },
  //调用axios请求
  created(){
    this.getList()
  },
  //axios请求
  methods: {
    async getList(){
      const {data: {list: res}} = await axios('https://applet-base-api-t.itheima.net/api/cart')
      console.log(res);

      this.list = res     //返回数据给list
    }
  }

}
</script>

<style>
.main{
  margin-top: 45px;
  margin-bottom: 50px;
}

</style>